<template>
    <div>
        <mt-swipe :auto="4000">
            <!-- //在组件中，使用v-for循环的话，一定要使用 key -->
  <mt-swipe-item v-for="item in LunbotuList" :key="item.id" >
      <img :src="item.img">
  </mt-swipe-item>
</mt-swipe>

<!-- //六宫格 -->
<div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
		                   <img src="../../img/menu1.png">
		                    <div class="mui-media-body">新闻资讯</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
		                    <img src="../../img/menu2.png">
		                    <div class="mui-media-body">图片分享</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
		                     <img src="../../img/menu3.png">
		                    <div class="mui-media-body">商品购买</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
		                    <img src="../../img/menu4.png">
		                    <div class="mui-media-body">留言反馈</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
		                    <img src="../../img/menu5.png">
		                    <div class="mui-media-body">视频专区</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
		                    <img src="../../img/menu6.png">
		                    <div class="mui-media-body">联系我们</div></a></li>
		         
		        </ul> 
		</div>
        <h3>HomeContainer</h3>
    </div>
</template>


<script>
import {Toast} from 'mint-ui'
export default{
    data(){
        return{
            LunbotuList:[]//保存轮播图的数组
        };
    },
    created(){
        this.getLunbotu();
    },
    methods:{
        getLunbotu(){
            //获取轮播图数据的方法
          this.$http.get('http://www.liulongbin.top:3005/api/getlunbo').then(result => {
                    if (result.body.status === 0) {
                        this.LunbotuList = result.body.message
                        console.log(result.body);
                    } else {
                        Toast('加载getAll()失败!');
                    }
                });
        }
    }
};
</script>


<style lang="less" scoped>
.mint-swipe,img{
    height:200px;
}
img{
    width:100%;
}
.mint-swipe-item{
    &:nth-child(1){
        background-color: red;
    }
    &:nth-child(2){
        background-color:blue;
    }
    &:nth-child(3){
        background-color:cyan;
    }
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell,.mui-grid-view.mui-grid-9{
    background-color: #fff;
    border:0;
    // border-right:0px solid #fff;
    // border-bottom:0px solid #fff;
}
.mui-content img{
    width:4rem;
    height:4rem;
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
    font-size:.8rem;
}
</style>